<template>
    <div>

        <el-dialog title="添加或修改员工信息" :visible.sync="dialogFormVisible">
            <el-form :model="form" label-width="100px">
                <el-form-item label="用户名" >
                    <el-input v-model="form.username" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" >
                    <el-input v-model="form.email" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="电话">
                    <el-input v-model="form.phone" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="密码" >
                    <el-input v-model="form.password" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="年龄" >
                    <el-input v-model="form.age" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="状态" >
                    <el-radio v-model="form.state" :label="0">正常</el-radio>
                    <el-radio v-model="form.state" :label="1">禁用</el-radio>
                </el-form-item>


            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveOrUpdateEmp">确 定</el-button>
            </div>
        </el-dialog>

        <el-form size="mini" :inline="true" :model="searchForm" class="demo-form-inline">
            <el-form-item label="店铺名称">
                <el-input v-model="searchForm.name" placeholder="请输入店铺名称"></el-input>
            </el-form-item>
            <el-form-item label="店铺电话">
                <el-input v-model="searchForm.tel" placeholder="请输入店铺电话"></el-input>
            </el-form-item>
            <el-form-item label="状态">
                <el-select v-model="searchForm.state" placeholder="状态">
                    <el-option label="正常" value="0"></el-option>
                    <el-option label="禁用" value="1"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="toQuery">查询</el-button>
                <el-button type="success" @click="dialogFormVisible = true">新增</el-button>
            </el-form-item>

        </el-form>

        <el-table
                :data="tableData"
                style="width: 100%"
                @selection-change="handleSelectionChange">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    label="店铺名称"
                    prop="name">
            </el-table-column>
            <el-table-column
                    label="店铺电话"
                    prop="tel">
            </el-table-column>
            <el-table-column
                    label="店铺入驻时间"
                    prop="registerTime">
            </el-table-column>
            <el-table-column
                    label="店铺状态"
                    prop="state">
            </el-table-column>
            <el-table-column
                    label="店铺地址"
                    prop="address">
            </el-table-column>
            <el-table-column
                    label="店铺logo"
                    prop="logo">
            </el-table-column>
            <el-table-column
                    label="店铺管理员ID"
                    prop="adminId">
            </el-table-column>
            <el-table-column width="200" label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="handleEdit(scope.row)">审核通过</el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">关闭</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="searchForm.currPage"
                :page-sizes="[1, 2, 3, 4]"
                :page-size="searchForm.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
    </div>
</template>
<script>
    export default {
        data(){
            return {
                options: [],
                form:{},//这个对象用于保存表单提交时的数据
                dialogFormVisible:false,
                searchForm: {
                    currPage: 1,
                    pageSize:10
                },
                total:0,
                tableData: []
            }
        },
        methods:{
            handleEdit(row){
                this.dialogFormVisible=true;
                this.form=row;

            },
            saveOrUpdateEmp(){
                this.$http.post('/emp/saveorupdate',this.form).then(res=>{
                    this.dialogFormVisible=false;

                })
            },
            toQuery(){
              this.$http.post('/shop/pagelist',this.searchForm).then(res=>{
                    this.tableData = res.data.data.rows;
                    this.total = res.data.data.total;
              })
            },
            handleSelectionChange(val) {

            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.searchForm.pageSize = val;
                this.toQuery();
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.searchForm.currPage = val;
                this.toQuery();
            }
        },
        mounted() {
            this.toQuery();
        }
    }
</script>